import React from "react";
import {
  FiImage,
  FiCamera,
  FiVideo,
  FiMapPin,
  FiGift,
  FiDollarSign,
} from "react-icons/fi";

interface PlusMenuProps {
  onSelect: (feature: string) => void;
}

const plusMenuItems = [
  { icon: <FiImage />, label: "相册" },
  { icon: <FiCamera />, label: "拍摄" },
  { icon: <FiVideo />, label: "视频通话" },
  { icon: <FiMapPin />, label: "位置" },
  { icon: <FiGift />, label: "红包" },
  { icon: <FiDollarSign />, label: "转账" },
];

const PlusMenu: React.FC<PlusMenuProps> = ({ onSelect }) => (
  <div className="grid grid-cols-4 gap-2 p-2 bg-gray-50 rounded-lg mb-2 plus-menu-container">
    {plusMenuItems.map((item, index) => (
      <button
        key={index}
        className="flex flex-col items-center justify-center p-2 hover:bg-gray-100 rounded-md"
        onClick={() => onSelect(item.label)}
      >
        <div className="text-xl text-gray-700 mb-1">{item.icon}</div>
        <span className="text-xs text-gray-500">{item.label}</span>
      </button>
    ))}
  </div>
);

export default PlusMenu;
